<template>
  <el-card class="box-card">
    <el-tabs v-model="activeName" class="demo-tabs">
      <el-tab-pane label="重置密码" name="first">
        <el-form
            ref="ruleFormRef"
            :model="ruleForm"
            :rules="rules"
            label-width="120px"
            class="demo-ruleForm"
            :size="formSize"
            status-icon
        >
          <el-form-item label="原密码" prop="old_pwd">
            <el-input v-model="ruleForm.old_pwd"  />
          </el-form-item>
          <el-form-item label="密码" prop="new_pwd">
            <el-input v-model="ruleForm.new_pwd"  />
          </el-form-item>
          <el-form-item label="确认密码" prop="re_pwd">
            <el-input v-model="ruleForm.re_pwd"  />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" v-onceClick="10000" plain @click="submitForm(ruleFormRef)" disabled>更改(展示版确保密码不被更改)</el-button>
          </el-form-item>
        </el-form>
      </el-tab-pane>
    </el-tabs>
  </el-card>
</template>

<script>
import {reactive, ref} from "vue";
import {changeUserPassword} from "@/api";
import {ElMessage} from "element-plus";

export default {
  name: "UIndex",
  setup(){
    let activeName = ref('first')

    // 表单校验
    const checkPassword = (rule, value, callback) => {
      if (value === ruleForm.new_pwd) {
        // 合法的邮箱
        return callback()
      }
      callback(new Error('请确认密码一致'))

    };

    const rules = reactive({
      old_pwd: [
        { required: true, message: '请填写原密码', trigger: 'blur' },
        { min: 6, max: 15, message: '6-15位非空格字符', trigger: 'blur' },
      ],
      re_pwd: [
        { required: true, message: '请再次填写密码', trigger: 'blur' },
        { validator:checkPassword, trigger: 'blur' },
      ],
      new_pwd: [
        { required: true, message: '请填写密码', trigger: 'blur' },
        { min: 6, max: 15, message: '6-15位非空格字符', trigger: 'blur' },
      ]
    })

    const formSize = ref('default')
    const ruleFormRef = ref()
    const ruleForm = reactive({
      old_pwd: '',
      new_pwd: '',
      re_pwd: ''
    })

    const submitForm = async (formEl) => {
      if (!formEl) return
      await formEl.validate(async (valid, fields) => {
        if (valid) {
          const res = await changeUserPassword(ruleForm)
          ElMessage.success(res.message)
        } else {
          ElMessage.error('请按要求填写数据')
          console.log('error submit!', fields)
        }
      })
    }

    const resetPassword = () => {

    }

    return{
      activeName,
      rules,
      formSize,
      ruleFormRef,
      ruleForm,
      submitForm,
      resetPassword
    }
  }
}
</script>

<style scoped>
.box-card{
  padding: 1%;
  height: 95%;
}
.el-input{
  width: 250px;
}
</style>
